<!DOCTYPE html>
<html lang="en" style="">
<head>
<!--shared:custom-meta-->
<base href="">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/*vfs[]:/css/ui-highlight.css*/
</style>
<script>
let DEBUG = false
DEBUG = true /*debug*/
</script>
<style>
/*file:css/app.css */
/*vfs[]:/css/ui.css*/
/*file:custom.css */
</style>
<!--shared:custom-head-->
<script type="importmap">
{
    "imports": {
        "vue": "../js/vue.mjs",  
        "vue-router": "../js/vue-router.mjs",  
        "@servicestack/vue": "../js/servicestack-vue.mjs",
        "@servicestack/client": "../js/servicestack-client.mjs",
        "core": "../js/core.mjs",
        "app": "./lib/app.mjs",
        "dtos": "./lib/dtos.mjs"
    }
}
</script>
</head>
<body class="loading noauth">
<!--shared:custom-body-->

<div class="when-loading"></div>

<div id="app"></div>

<template id="app-template">
<div class="flex">
    <sidebar v-if="showSidebar" @hide="showSidebar=false"></sidebar>
    <div class="md:pl-sidebar md:w-sidebar overflow-auto flex flex-col flex-1">
        <div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-white">
            <button type="button" @click="showSidebar=true"
                    class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                <span class="sr-only">Open sidebar</span>
                <!---: Heroicon name: outline/menu -->
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </div>
        <main class="flex-1 overflow-auto">
            <div class="pt-2.5 pb-6">
                <div class="absolute top-1 right-2 flex z-10">
                    <div v-if="routes.uiHref()" class="flex items-center">
                        <a title="View in API Explorer" :href="routes.uiHref({ tab:'details' })"
                           class="p-1 inline-flex items-center border border-transparent hover:border-gray-400 hover:shadow-sm text-sm rounded bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <svg class="w-6 h-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.34 4.814L.72 6.134m.88 2.412l3.619-1.319M4.12 4.211l1.318 3.62L13.5 5.575L11.741.75zm1.377 9.039l2.5-6.135l2.5 6.135M.5 5.53l1.319 3.62"/></svg>
                        </a>
                    </div>
                    <div v-if="store.plugins.apiKey" class="ml-2 flex items-center">
                        <a class="p-1 inline-flex items-center border border-transparent hover:border-gray-400 hover:shadow-sm text-sm rounded bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                           aria-expanded="false" aria-haspopup="true" v-href="{ dialog:'apikey' }">
                            <svg class="w-6 h-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></g></svg>
                        </a>
                    </div>
                    <auth-nav v-if="store.plugins.auth" :auth="store.auth" :logout="store.logout"></auth-nav>
                </div>
                <router-view></router-view>
            </div>
        </main>
    </div>
    <api-key-dialog v-if="routes.dialog === 'apikey'" class="z-40" :title="store.plugins.apiKey?.label" @done="routes.to({ dialog:'' })"></api-key-dialog>
</div>
</template>

<script>
function loadAuth(auth) {
    window.AUTH = !auth || auth.responseStatus ? null : auth
}
/*gateway:window.Server=MetadataApp({view:'locode',jsconfig:'eccn,inv:false'})?*/
</script>
<script src="../auth?callback=loadAuth&jsconfig=eccn"></script>

<script type="module">
import { useMetadata, useAuth } from "@servicestack/vue"
import { setFavIcon, setBodyClass } from "core"
import { humanify } from "@servicestack/client"

const { loadMetadata } = useMetadata()
const { signIn, toAuth } = useAuth()

globalThis.AUTH = toAuth(globalThis.AUTH)
loadMetadata()

signIn(globalThis.AUTH)
setBodyClass({ auth:globalThis.AUTH })

document.title = globalThis.Server.app.serviceName
setFavIcon(globalThis.Server.ui.brandIcon, globalThis.Server.app.baseUrl + '/metadata/svg/servicestack.datauri')

window.config = {
    sidebar: {
        /** @param {MetadataOperationType} op */
        label(op) {
            return humanify(op.dataModel.name)
        }
    }
}
</script>

<script>
/*files:js/*.js */
</script>
<!--components:Brand,ApiKeyDialog-->
<!--module:components/*.mjs-->
<!--file:custom.html-->

<script type="module">
import { ref, computed, nextTick, inject, onMounted } from "vue"
import ServiceStackVue from "@servicestack/vue"
import { $1, $$ } from "@servicestack/client"
import { app } from "app"

const App = {
    template: $1('#app-template'),
    setup(props) {
        const app = inject('app')
        const store = inject('store')
        const routes = inject('routes')
        const router = inject('router')
        const server = inject('server')

        const showSidebar = ref(true)

        return { app, store, routes, router, showSidebar }
    }
}

Object.keys(app.Components).forEach(name => {
    ServiceStackVue.component(name, app.Components[name])
})

app.build(App).mount('#app')
app.start()

function styleProperty(name) {
    return document.documentElement.style.getPropertyValue(name)
}
function setStyleProperty(props) {
    let style = document.documentElement.style
    Object.keys(props).forEach(name => style.setProperty(name, props[name]))
}

let sidebarWidth = styleProperty('--sidebar-width')

nextTick(() => {
    document.body.classList.remove('loading')
    let max = Math.max(...Array.from($$('#sidebar .nav-item')).map(el => el.clientWidth))
    if (max > (240 - 75)) {
       sidebarWidth = (max + 75) + 'px'
       setStyleProperty({ '--sidebar-width': sidebarWidth })
    }
})
</script>
<script>
/*file:custom.js */
</script>

<!--shared:custom-end-->
</body>
</html>
